<template>
  <div class="joints">
    <div class="tools">
      <Button type="primary" @click="init">Init</Button>
      <Button type="primary" @click="scale">Scale</Button>
    </div>
    <Card>
    <div id="draw"></div>
    </Card>
  </div>
</template>

<script>
// import joint from "jointjs";

const joint = require('jointjs')
export default {
  data() {
    return {
        graph:null,
        paper:null
    };
  },
  components: {},
  mounted(){
    //   this.init()
  },
  methods: {
    init() {
      // 先创建joint graph 对象
       console.warn("joint",joint)
      var graph = new joint.dia.Graph();
        console.warn("graph",graph)
      //设定容器基本信息
      var paper = new joint.dia.Paper({
        el: document.getElementById("draw"),
        width: 900,
        height: 700,
        model: graph,
      });
      let rect = new joint.shapes.basic.Rect({
        position: { x: 100, y: 30 },
        size: { width: 100, height: 30 },
        attrs: {
          rect: { fill: "rgb(75, 74, 103)" },
          text: { text: "node", fill: "white" },
        },
        // attrs:{
        //     class:"r1"
        // }
      });
      let rect2 = rect.clone();

      let rect3 = rect.clone();
      rect2.translate(300);
      rect3.translate(600);

      let link = new joint.dia.Link({
        source: { id: rect.id },
        target: { id: rect2.id },
      });

      graph.addCells([rect, rect2, rect3, link]);
      paper.scale(1,1);
      paper.translate(300, 50);
      this.graph=graph;
      this.paper=paper;
    },
    scale(){
        this.paper.scale(0.5,0.5)
    }
  },
};
</script>

<style lang="less">
.joints {
  width: 100%;
  #draw{
      height: 500px;
      .r1{
          fill: red;
          color: white;
      }
  }
}
</style>
